<template>
  <div class="container">
    <card>
      <template v-slot:header>
        <view class="title">{{ order.shopName }}</view>
      </template>
      <view class="item">
        <view class="mark">店铺地址: </view>
        <view class="value">{{ order.address }}</view>
      </view>
      <view class="item">
        <view class="mark">联系方式: </view>
        <view class="value">{{ order.phone }}</view>
      </view>
      <view class="item">
        <view class="mark">下单时间: </view>
        <view class="value">{{ order.createTime }}</view>
      </view>
      <view class="item">
        <view class="mark">订单完成时间: </view>
        <view class="value">{{ order.completeTime }}</view>
      </view>
      <view class="item">
        <view class="mark">运行程序: </view>
        <view class="value">{{ computedProgram(order.program) }}</view>
      </view>
      <view class="item">
        <view class="mark">订单状态: </view>
        <view class="value">{{ computedStatus(order.status) }}</view>
      </view>
      <view class="item">
        <view class="mark">所需价格: </view>
        <view class="value">{{ order.price }}</view>
      </view>
      <view class="item">
        <view class="mark">支付价格: </view>
        <view class="value">{{ order.payMoney }}</view>
      </view>
      <view class="item">
        <view class="mark">配送地址: </view>
        <view class="value">{{ order.detailAddress }}</view>
      </view>
      <view class="item">
        <view class="mark">文件总页数: </view>
        <view class="value">{{ order.num }}</view>
      </view>
      <view class="item">
        <view class="mark">色彩: </view>
        <view class="value">{{ computedColor }}</view>
      </view>
      <view class="item">
        <view class="mark">方向: </view>
        <view class="value">{{ computedDirection }}</view>
      </view>
      <view class="item">
        <view class="mark">纸张: </view>
        <view class="value">{{ order.paper }}</view>
      </view>
      <view class="item">
        <view class="mark">页: </view>
        <view class="value">{{ computedPage }}</view>
      </view>
      <view class="item">
        <view class="mark">备注: </view>
        <view class="value">{{ order.remark }}</view>
      </view>
      <view class="item" style="display: block">
        <view class="mark">打印文件:</view>
        <view class="value">
          <view class="file-list">
            <view
              class="file-item ellipsis-text"
              v-for="item in order.files"
              :key="item.fileId"
            >
              <text class="text">{{ item.fileName }}</text>
              <u-button
                class="btn"
                type="primary"
                size="mini"
                :hairline="true"
                text="预览"
                @click="viewFile(item)"
              ></u-button>
            </view>
          </view>
        </view>
      </view>
    </card>
    <card>
      <template v-slot:header>
        <view class="title">订单进度</view>
      </template>
      <view style="margin: 20rpx 0">
        <u-steps
          :current="order.status"
          activeIcon="checkmark"
          inactiveIcon="arrow-right"
        >
          <u-steps-item
            title="订单已提交"
            :desc="order.createTime"
          ></u-steps-item>
          <u-steps-item title="商家已接收文件" desc="等待打印"></u-steps-item>
          <u-steps-item
            title="文件打印完成"
            :desc="order.completeTime"
          ></u-steps-item>
          <u-steps-item
            v-if="order.program == 1"
            title="配送完成"
            desc="等待配送"
          ></u-steps-item>
        </u-steps>
      </view>
    </card>
    <card>
      <template v-slot:header>
        <view class="title">操作</view>
      </template>
      <view style="margin: 10rpx">
        <u-grid :border="false" col="4">
          <u-grid-item @click="callShopHnalde">
            <u-icon
              customStyle="{ paddingTop: 20 + 'rpx' }"
              name="phone"
              size="22"
            ></u-icon>
            <text class="grid-text">联系商家</text>
          </u-grid-item>
        </u-grid>
        <u-toast ref="uToast" />
      </view>
    </card>
  </div>
</template>
<script>
import { getOrderDetail } from "@/api/Home/index";
import Card from "@/components/Card/index";
import { getProgram, getStatus } from "@/utils/utils";

export default {
  name: "order-detail",
  data() {
    return {
      //订单的id
      id: undefined,
      order: {},
    };
  },
  components: {
    card: Card,
  },
  computed: {
    computedColor: function () {
      return this.order.color == "dark" ? "黑白" : "彩色";
    },
    computedDirection: function () {
      return this.order.direction == "row" ? "横向" : "纵向";
    },
    computedPage: function () {
      return this.order.page == "single" ? "单页" : "双页";
    },
  },
  methods: {
    viewFile(item) {
      uni.navigateTo({
        url: `/pages/printer/fileView/index?url=${item.viewPath}`,
      });
    },
    computedProgram(program) {
      return getProgram(program);
    },
    computedStatus(status) {
      return getStatus(status);
    },
    getOrderDetail() {
      getOrderDetail(this.id)
        .then((result) => {
          const { data } = result;
          this.order = data;
          uni.stopPullDownRefresh();
        })
        .catch((err) => {});
    },
    renderItem() {
      const template = [{ mark: "", key: "" }];
    },
    callShopHnalde() {
      uni.makePhoneCall({
        phoneNumber: this.order.phone,
      });
    },
  },
  onLoad: function (option) {
    const { id } = option;
    this.id = id;
    this.getOrderDetail();
  },
  onPullDownRefresh(){
    this.getOrderDetail();
  }
};
</script>
<style lang="scss">
.container {
  background-color: #f6f6f6;
  padding: 20rpx;
  height: 100%;
  .item {
    display: flex;
    justify-content: flex-start;
    padding: 10rpx 32rpx;
    .mark {
      color: #8f8f8f;
    }
    .value {
      text-indent: 8rpx;
    }
  }
  .ellipsis-text {
    display: flex;
    justify-content: space-between;
    padding: 10rpx 0;
    .btn {
      width: 50rpx;
    }
    .text {
      width: calc(100% - 60rpx);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .grid-text {
    font-size: 14px;
    color: #909399;
    padding: 10rpx 0 20rpx 0rpx;
    /* #ifndef APP-PLUS */
    box-sizing: border-box;
    /* #endif */
  }
}
</style>